<template>
  <div style="background: #2c3e50;width:100%;height:100%;vertical-align: middle;padding-top: 200px;">
    <center>
      <div style="width: 400px;height:400px;">
        <span style="font-size: 50px;font-weight: bolder;color:#fff;">EasyBuilder</span>
        <el-form :model="formData">
          <el-form-item label="">
            <el-input prefix-icon="el-icon-user-solid" v-model="formData.username"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-input :type="inputType" prefix-icon="el-icon-lock" v-model="formData.password">
              <i slot="suffix" class="el-input__icon el-icon-view" style="cursor:pointer" @click="changeInputType"></i>
            </el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="doLogin" style="width:100%;">登 陆</el-button>
      </div>
    </center>
  </div>
</template>

<script>
import {login} from "../../api/login";
import {message} from "ant-design-vue";
export default {
  name: "index",
  data(){
    return {
      formData:{ //表单数据
        username: '',
        password: '',
      },
      inputType: 'password'
    }
  },
  methods:{
    //展示或隐藏密码
    changeInputType(){
      this.inputType = this.inputType=='password' ? 'text' : 'password';
    },
    doLogin(){
      login(window.btoa(this.formData.username),window.btoa(this.formData.password)).then(res=>{
        if (res.success) {
          message.success("登陆成功");
          this.$router.push('/index');
        }
      });
    }
  }
}
</script>

<style scoped>

</style>